<template>
  <scroll-view scroll-y="true" class="station-info" :style="styleHeight">
    <view class="info-wrap">
      <view class="row row-title">
        <view class="textl text-bold">当前计费时段</view>
        <view class="textr">{{ items.time }}</view>
      </view>
      <view class="row-wrap">
        <view class="row-tip1" v-if="items.includeAloneEquipment">
          <text class="iconfont icon-tip"></text>
          当前场站含单独定价终端，可前往终端列表查看
        </view>
        <view v-for="(item, index) in data.prices" :key="item.id">
          <view v-show="(index > 1 && isShow) || index < 2">
            <view v-if="index !== 0" class="row-line"></view>
            <view class="row row-info">
              <view class="textl cblur">
                <text class="iconfont icon-subtract cblur"></text>
                {{ item.title || '--' }}
                <text v-if="index === 0" class="row-tip row-tip2">当前</text>
              </view>
              <view class="textr cblur">
                <text v-if="item.deleteSumPrice" class="textr2">{{ item.deleteSumPrice }}</text>
                {{ item.sumPrice || '--' }}
              </view>
            </view>
            <view class="row row-info">
              <view class="textl">
                <text class="iconfont icon-power"></text>
                电费
              </view>
              <view class="textr">
                <text v-if="item.deletePricePower" class="textr2">{{ item.deletePricePower }}</text>
                {{ item.pricePower || '--' }}
              </view>
            </view>
            <view class="row row-info">
              <view class="textl">
                <text class="iconfont icon-service"></text>
                服务费
              </view>
              <view class="textr">
                <text v-if="item.deletePriceService" class="textr2">
                  {{ item.deletePriceService }}
                </text>
                {{ item.priceService || '--' }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 更多价格 -->
      <view v-if="data.prices.length > 2" class="more-price" @tap="tabMore">
        {{ isShow ? '隐藏更多' : '查看更多' }}
        <text class="iconfont icon-arrow-right" :class="{ 'arrow-show': isShow }"></text>
      </view>
    </view>
    <view class="info-wrap" v-if="items.isOccupationCost">
      <view class="row row-title">
        <view class="textl text-bold">超时占用收费</view>
      </view>
      <view class="row-wrap">
        <view class="row-tip">
          完成充电之后请及时离场，超{{ items.parkBufferTime || '0' }}分钟将收取占用费！
        </view>
        <view class="row row-info">
          <view class="textl">
            <text class="iconfont icon-power"></text>
            超时计费
          </view>
          <view class="textr">
            {{ items.overtimeMoney || '--' }}元/{{ items.overtimeMin || '--' }}分钟
          </view>
        </view>
      </view>
    </view>
    <view class="info-wrap">
      <view class="row row-title">
        <view class="textl text-bold">其他信息</view>
      </view>
      <view class="row-wrap">
        <view v-for="(item, index) in data.info" :key="index" class="row row-info">
          <template v-if="!item.hide">
            <view class="textl">
              <text class="iconfont" :class="item.icon"></text>
              {{ item.title }}
            </view>
            <view v-if="!item.style" class="textr" @tap.stop="tabBnt(item)">
              {{ item.value }}
              <view v-if="item.ricon" class="iconfont" :class="item.ricon"></view>
            </view>
            <view v-else class="textr">
              <view :class="item.style">{{ item.value }}</view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <view style="height: 1px"></view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { getPrice } from './price';

interface Props {
  styleHeight: string; // 滚动条高度
  items: any;
}
const prop = withDefaults(defineProps<Props>(), {
  styleHeight: '',
  items: {} as any,
});

const data = reactive({
  //场站信息
  info: [
    { title: '营业时间', icon: 'icon-subtract', value: '' },
    { title: '停车费用说明', icon: 'icon-stop', value: '' },
    { title: '场站描述', icon: 'icon-des', value: '' },
    { title: '服务提供商', icon: 'icon-org', value: '' },
    {
      title: '运营商营业执照',
      icon: 'icon-license',
      value: '',
      ricon: 'icon-arrow-right',
      path: '/pagesMain/businessLicense/businessLicense',
      query: '',
      hide: true,
    },
    { title: '开票', icon: 'icon-invoice', value: '', style: 'text-box' },
    { title: '客服热线', icon: 'icon-phone', value: '' },
  ],
  prices: [] as any,
});

watch(
  () => prop.items,
  () => {
    setInfo();
  }
);

const setInfo = () => {
  console.log('setInfo-----');
  // 其他信息
  data.info[0].value = prop.items.openExplain || '--';
  data.info[1].value = prop.items.parkExplain || '--';
  data.info[2].value = prop.items.stationDescribe || '--';
  data.info[3].value = prop.items.operatorName || '--';
  data.info[3].title = `服务提供商${prop.items.attr ? `(${prop.items.attr})` : ''}`;
  data.info[4].value = '去查看';
  if (prop.items.businessLicense) {
    data.info[4].query = `?url=${encodeURIComponent(prop.items.businessLicense)}`;
    data.info[4].hide = false;
  }
  data.info[5].value = prop.items.supportInvoice === '1' ? '支持开票' : '不支持开票';
  data.info[6].value = prop.items.hotLine || '--';

  //电站价格
  data.prices = [];
  console.log('333---', prop.items?.appCostTemplateResultDTOList);
  prop.items?.appCostTemplateResultDTOList?.forEach((item: any) => {
    const obj = getPrice(item);
    data.prices.push(obj);
  });
  console.log('222---', data.prices);
};
setInfo();

const tabBnt = (item: any) => {
  if (item.path && item.query) {
    // console.log('qqqqqqqqq----', item.query);
    uni.navigateTo({
      url: `${item.path}${item.query}`,
    });
  }
};

// 更多电价
const isShow = ref(false);
const tabMore = () => {
  isShow.value = !isShow.value;
};
</script>

<style lang="scss" scoped>
.station-info {
  width: 100vw;
  background-color: #fff;

  .info-wrap {
    // margin-bottom: 10px;
    padding: 12px 16px 0 16px;
    background-color: #fff;

    &:last-child {
      padding-bottom: 12px;
    }

    .row-wrap {
      margin: 4px 0;
      padding: 5px 0;
      background-color: #f6f8ff;
      border-radius: 8px;
    }

    .row-tip {
      display: inline-flex;
      align-self: center;
      line-height: 22px;
      padding: 0 6px;
      margin: 0 5px;
      color: #fff;
      background-color: #fc8888;
      font-size: 14px;
      border-radius: 4px;
    }
    .row-tip1 {
      display: inline-flex;
      align-self: center;
      line-height: 22px;
      padding: 0 6px;
      margin: 0 5px;
      color: $uni-color-primary;
      font-size: 14px;
      .iconfont {
        margin-right: 4px;
      }
    }
    .row-tip2 {
      // position: absolute;
      border-radius: 50px;
      font-size: 12px;
    }

    .row {
      display: flex;
      // align-items: center;
      justify-content: space-between;
    }

    .row-title {
      margin-bottom: 8px;
      color: #000;

      .textl {
        line-height: 24px;
        font-size: 16px;
      }

      .textr {
        text-align: right;
        line-height: 22px;
        font-size: 14px;
      }
    }

    .row-info {
      position: relative;
      margin: 4px 9px;
      line-height: 22px;
      font-size: 14px;

      .iconfont {
        margin-right: 4px;
        color: #242424;
        font-size: 16px;
      }

      .textl {
        color: #545454;
      }

      .textr {
        display: flex;
        justify-content: flex-end;
        text-align: right;
        width: 50%;
        color: #545454;
        word-break: break-all;

        .iconfont {
          color: #545454;
          font-size: 10px;
        }
      }

      .textr1 {
        color: #242424;
      }

      .textr2 {
        font-size: 12px;
        color: #b5b5b5;
        text-decoration: line-through;
      }

      .text-box {
        display: inline-flex;
        justify-content: center;
        height: 22px;
        padding: 0 6px;
        background-color: $uni-color-primary;
        color: #fff;
        border-radius: 50px;
      }

      .cblur {
        color: $uni-color-primary;
      }
    }

    .more-price {
      display: flex;
      justify-content: center;
      margin-top: 12px;
      line-height: 22px;
      font-size: 14px;
      color: $uni-color-primary;

      .icon-arrow-right {
        margin-left: 8px;
        font-size: 8px;
        color: $uni-color-primary;
        transform: rotate(90deg);
      }

      .arrow-show {
        transform: rotate(270deg);
      }
    }

    .row-line {
      width: calc(100% - 18px);
      height: 1px;
      margin: 5px 9px;
      background-color: #e5e8f6;
    }
  }
}
</style>